<template>
  <div class="topic-list">
    <div v-for="topic in list" :key="topic.id" class="topic-detail">
      <div class="title" @click="findDetail(topic.id)">{{ topic.title }}</div>
      <div class="time-info">
        <div class="update_time">
          <span class="time-text">发布时间</span>
          <span>{{ topic.create_time }}</span>
        </div>
        <div class="see">
          <span>浏览量</span>
          <span>{{ topic.pv }}</span>
        </div>
      </div>
    </div>
    <div class="noData" v-if="list.length === 0">没有数据</div>
  </div>
</template>

<script>
export default {
  name: 'TopicList',
  props: {
    list: {
      required: true,
      type: Array
    }
  },
  methods: {
    findDetail(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style scoped>
.topic-list {
  padding-top: 20px;
}
.topic-list .topic-detail {
  padding: 10px 30px 10px 30px;
  border-bottom: 1px solid #e2e2e2;
}
.topic-list .topic-detail .title {
  font-size: 16px;
  cursor: pointer;
}
.title:hover {
  text-decoration: underline;
}
.time-info {
  display: flex;
  justify-content: space-between;
}
.update_time,
.see {
  font-size: 13px;
  color: #afb9c1;
  margin-top: 10px;
}
.title {
  display: inline-block;
}
.time-text {
  margin-right: 10px;
}
.noData {
  text-align: center;
}
</style>
